<template>
  <div class="van-h5-radio">
    <div
      v-for="item in items"
      :key="item.value"
      :class="{
        'van-h5-radio-item': true,
        'van-h5-radio-item--active': value === item.value,
      }"
      @touchstart.stop="onChange(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
import { defineProps, toRefs } from 'vue'
const props = defineProps(['value', 'onChange', 'items'])
const { items, onChange, value } = toRefs(props)

console.log(value.value)
</script>

<style lang="scss" scoped>
.van-h5-radio {
  width: 100%;
  display: flex;
  &-item {
    height: dpi(9rem);
    flex: 1;
    flex-shrink: 0;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-size: dpi(2rem);
    font-family: PingFangSC-Regular;
    &:last-child {
      border-right: 1px solid #ddd;
    }

    &--active {
      border: dpi(4px) solid #0571b0;
      color: #0571b0;
      font-weight: bold;

      &:last-child {
        border-right: dpi(4px) solid #0571b0;
      }
      & + .van-h5-radio-item {
        border-left: 0;
      }
    }
  }
}
</style>
